<template>
  <div class="divBox">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <div class="container">
          <el-row type="flex" class="row-bg" justify="space-between">
            <el-col :span="22">
              <el-input
                v-model="listPram.title"
                placeholder="请输入名称"
                clearable
                size="small"
                style="width: 400px;"
              >
                <el-button
                  slot="append"
                  icon="el-icon-search"
                  size="small"
                  @click="handlerSearch"
                />
              </el-input>
              <!-- <el-button @click="getUid">获取id</el-button> -->
              <el-date-picker v-model="listPram.submitTime" type="date" @change="handlerSearch" value-format="yyyy-MM-dd" format="yyyy-MM-dd" size="small" placement="bottom-end" placeholder="自定义时间" style="width: 250px;"  />
            </el-col>
          </el-row>
        </div>
      </div>
      <el-table :data="listData.list" style="width: 100%" v-loading="loading">
        <el-table-column prop="activityTitle" label="活动名称" width="600"> </el-table-column>
        <el-table-column prop="activityId" label="活动id" width="600"> </el-table-column>
        <el-table-column prop="image" label="活动名称" > </el-table-column>
        <el-table-column label="参与人"> 
          <template slot-scope="scope">
            {{scope.row.nickname}}{{scope.row.userPhone}}
            </template>
        </el-table-column>
        <el-table-column prop="uid" label="uid"> </el-table-column>
        <el-table-column prop="submitTime" label="参与时间"> </el-table-column>
      </el-table>
      <el-pagination
        :current-page="listPram.page"
        :page-sizes="constants.page.limit"
        :layout="constants.page.layout"
        :total="listData.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>
  </div>
</template>

<script>
import {
  getChoujiangRecord
} from "@/api/choujiang";
export default {
  name: "ChoujiangRecord",
  data() {
    return {
      constants: this.$constants,
      listPram: {
        title:'',
        page: 1,
        limit: 100
      },
      loading: true,
      listData: { list: [], total: 0 },
    };
  },
  created() {},
  mounted() {
    // 获取所有商家
    this.getChoujiangListFn();
  },
  methods: {
    getUid() {
      let str = []
      for (let i = 0; i < this.listData.list.length; i++) {
        str.push(this.listData.list[i].uid)
      }
      let arr = []
      for (let j = 0; j < str.length; j++) {
        if (arr.indexOf(str[j]) == -1) {
          arr.push(str[j])
        }
      }
      let dff = arr.sort((a, b) => {
        return a - b
      })
      console.log(dff, 'dff----')
      console.log(arr, 'arr----')
    },
    getChoujiangListFn() {
      this.loading = true;
      getChoujiangRecord(this.listPram).then(res => {
        this.listData = res;
        this.loading = false;
      });
    },
    handlerSearch() {
      this.listPram.page = 1;
      this.getChoujiangListFn(this.listPram);
    },
    handleSizeChange(val) {
      this.listPram.limit = val;
      this.getChoujiangListFn(this.listPram);
    },
    handleCurrentChange(val) {
      this.listPram.page = val;
      this.getChoujiangListFn(this.listPram);
    }
  }
};
</script>

<style scoped lang="scss">
.el-input-group__append,
.el-input-group__prepend {
  background-color: #1890ff !important;
  color: #fff !important;
  border-color: #1890ff !important;
  border-radius: 0 4px 4px 0;
}
.cascaderW {
  width: 350px;
}
.mapBox {
  text-align: center;
}
.sub {
  width: 100%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.question {
  width: 80%;
  .line {
    text-align: center;
  }
  .red {
    color: #ff0000;
  }
}
.bghui {
  background: #fafafa;
  width: 100%;
  position: relative;
  margin-bottom: 20px;
  .deleanswer {
    position: absolute;
    top: 0;
    right: 0;
    width: 80px;
    height: 40px;

    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-size: 26px;
    color: #fff;
    background: #ff0000;
    padding-left: 10px;
    border-radius: 40px 0 0 100px;
  }
  .answer {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 20px;
  }
  .ifsuccess {
    width: 100px;
    height: 36px;
    background: #bababa;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .successicon {
    background: green;
    color: #fff;
  }
}
.red {
  color: red !important;
}
.question_main {
  padding: 10px;
}
</style>
